<script setup lang="ts">
/**
 * * 递归渲染菜单组件
 * * 能够根据MenuType 类型的数据渲染 导航菜单
 */
import type { MenuType } from '@/types/menu'
import { useRouter } from 'vue-router'
import { icon } from '@/util/icons'
defineProps<{
  routeData: MenuType
}>()

const router = useRouter()
function routerTo(route: MenuType) {
  router.push({ name: route.name })
}
</script>

<template>
  <el-menu-item
    :index="routeData.name"
    v-once
    v-if="routeData.children.length === 0 && routeData.meta.show"
    :disabled="routeData.meta?.disabled"
    @click="routerTo(routeData)"
  >
    <el-icon v-once v-if="routeData.meta.iconType != 'none'">
      <component
        v-once
        v-if="routeData.meta.iconType === 'sys'"
        :is="(icon as any)[routeData.meta.icon]"
      ></component>
    </el-icon>
    <template #title>
      <span v-once>{{ routeData.meta.name }}</span>
    </template>
  </el-menu-item>
  <el-sub-menu
    v-once
    :disabled="routeData.meta?.disabled"
    :index="routeData.name"
    :popper-offset="0"
    v-if="routeData.children.length !== 0 && routeData.meta.show"
  >
    <template #title>
      <el-icon v-once v-if="routeData.meta.iconType != 'none'">
        <component
          v-once
          v-if="routeData.meta.iconType === 'sys'"
          :is="(icon as any)[routeData.meta.icon]"
        ></component>
      </el-icon>
      <span v-once>{{ routeData.meta.name }}</span>
    </template>
    <RecursiveMenu
      v-for="ro in routeData.children"
      v-once
      :key="ro.meta.key"
      :route-data="ro"
    ></RecursiveMenu>
  </el-sub-menu>
</template>
<style scoped lang="less">
.el-sub-menu,
.el-menu-item {
  max-width: 200px;
  overflow: hidden;
}
</style>
